{extend name="public:base"}
{block name="body"}
    <div class="row">
        <div class="col-md-8">
            <h2 class="mt-2 text-success">{$art.cate_id|getCateName}</h2>
            <div>

                <div>
                    <h4><a href="">{$art.title}</a></h4>
                    <p>发布者:{$art.id|getUserName} &nbsp;&nbsp;&nbsp;&nbsp;
                        发布时间:{$art.create_time|date='Y/m/d'}&nbsp;&nbsp;&nbsp;&nbsp;
                        阅读量:{$art.pv}&nbsp;&nbsp;&nbsp;&nbsp;
                    </p>
                    <div>{:htmlspecialchars_decode($art.content)}</div>
                    <hr>
                    {if condition="$is_fav eq 0"}
                    <button class="btn btn-primary " type="button" id="fav" user_id="{$art.user_id}" article_id="{$art.id}" session_id="{$Think.session.user_id}" >
                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                        </svg>
                        收藏</button>
                    {else}
                    <button class="btn btn-success " type="button" id="fav" user_id="{$art.user_id}" article_id="{$art.id}" session_id="{$Think.session.user_id}">
                    <svg width="1em" style="color: red" height="1em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
                        </svg>已经收藏
                    </button>
                    {/if}
                </div>
                <hr>
                <form class="form-group">
                    <textarea class="form-control" style="max-height: 100px;min-height: 100px;" name="content"  placeholder="评论一下..."></textarea>
                    <div class="text-right mt-1">
                        <button type="button" class="btn btn-primary btn-lg" style="font-size: 10px" onclick="sendComment(this)">提交</button>
                    </div>
                </form>
                <div style="font-size: 10px" id="comment">
                    {volist name="$comment" id="cm"}
                    {eq name="$cm.level" value="0"}
                    <hr>

                    <div class="mt-2 mb-2">{$cm.user_id|getUserName}:{$cm.content} {neq name="$cm.user_id" value="$Think.session.user_id"}  <a href="javascript:;" onclick="sendreply(this,{$cm.user_id},{$cm.id})"> 回复</a>{/neq}
                        <div class="reply_content"></div>
                    </div>

                    {else/}
                    <div><span class="ml-5 mt-2 mb-2" >{$cm.user_id|getUserName } 回复 {$cm.reply_id|getUserName}:{$cm.content}</span> {neq name="$cm.user_id" value="$Think.session.user_id"}<a href="javascript:;" onclick="sendreply(this,{$cm.user_id},{$cm.id})"> 回复</a>{/neq}
                    <div class="reply_content"></div>
                    </div>
                    {/eq}



                    {/volist}
                </div>
            </div>
        </div>
        <script>
            $(function () {
                $('#fav').on('click',function () {
                    var user_id=$(this).attr('user_id');
                    var article_id=$(this).attr('article_id');
                    var session_id=$(this).attr('session_id');
                    $.ajax({
                        type:'get',
                        url:"{:url('index/fav')}",
                        data:{
                            'user_id':user_id,
                            'article_id':article_id,
                            'session_id':session_id,
                        },
                        dataType:'json',
                        success:function (res) {
                            switch (res.status) {
                                case -1:
                                    alert(res.msg);break;
                                case 0:
                                    $('#fav').attr('class','btn btn-primary');
                                    $('#fav').html('已取消');
                                    alert(res.msg);break;
                                case 1:
                                    $('#fav').attr('class','btn btn-success');
                                    $('#fav').html('<svg width="1em" style="color: red" height="1em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n' +
                                        '  <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>\n' +
                                        '</svg>已经收藏');
                                    alert(res.msg);break;
                                case 2:
                                    alert(res.msg);break;

                            }
                        }
                    })
                })
            })
        </script>
        <script>
            function sendComment(_this,rid=0,pid=0) {
                $.ajax({
                    url:"{:url('index/saveComment')}",
                    data:{
                        article_id: {$art.id},
                        user_id:{$Think.session.user_id},
                        content:$(_this).parent().siblings('textarea').val(),
                        reply_id:rid,
                        pid:pid
                    },
                    success:function (res) {
                        if (res.status==1){


                            html='';
                            c=res['comment'];
                            for (i=0;i<c.length;i++){
                                if (c[i]['level']==0){
                                    html+=`<hr> <div class="mt-2 mb-2">`+c[i]['name']+`:`+c[i]['content'] ;
                                    if(c[i].user_id!=={$Think.session.user_id}){
                                        html+=`<a href="javascript:;" onclick="sendreply(this,`+c[i]['user_id']+`,`+c[i]['id']+`)"> 回复</a>`
                                    }
                                    html+=` <div class="reply_content"></div></div>`;
                                }else{

                                    html+=` <div><span class="ml-5 mt-2 mb-2" >`+c[i]['name']+` 回复 `+c[i]['reply_name']+`:`+c[i]['content']+`</span> `;
                                    if(c[i].user_id!=={$Think.session.user_id}){
                                    html+=`<a href="javascript:;" onclick="sendreply(this,`+c[i]['user_id']+`,`+c[i]['id']+`)"> 回复</a>`
                                    }
                                    html+=` <div class="reply_content"></div></div>`
                                }

                            }
                            $('#comment').html(html);
                        }
                    }
                })
            }
            function sendreply(_this,reply_id,pid) {
                $('.reply_content').html('');
                $(_this).siblings('div').html(`<form class="form-group">
                        <textarea class="form-control" style="max-height: 100px;min-height: 100px;" name="content"  placeholder="评论一下..."></textarea>
                        <div class="text-right mt-1">
                            <button type="button" class="btn btn-primary btn-lg" style="font-size: 10px" onclick="sendComment(this,`+reply_id+`,`+pid+`)">提交</button>
                        </div>
                    </form>`);
            }
        </script>
{/block}